<template>
  <div>
    <nav-bar class="nav_bar">
      <img class="left" slot="left" src="../../assets/img/navbar/ic_title_close.png" alt="" @click="$router.back()">
      <span slot="center">停服转游</span>
      <img class="right" slot="right" src="../../assets/img/navbar/ic_header_search.png" alt="" @click="serachClick">
    </nav-bar>
    <!-- <scroll :probeType="3" class="content_scroll"> -->
      <div class="content_box" ref="viewhome">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <ul>
              <li v-for="(item, index) in list" :key="index" class="list_item" @click="itemClick(index)">
                <p class="list_title">{{item.title}}</p>
                <div class="list_date">{{item.fabutime | fnDate}}</div>
              </li>
            </ul>
          </van-list>
      <back-top :scrollTop="scTop" @back-top="backTop"/>

      </div>
    <!-- </scroll> -->
    <div class="bottom_btn" v-show="!typeList.stopserver" @click="typeClose"></div>
    <search-other 
      :show="show" 
      @on-search="onSearch" 
      @close-search="closeSearch" 
      :gametype="gameType"
      :typeid="typeid"/>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue'
import Scroll from '@/components/common/scroll/Scroll.vue'
import { getNewsList } from "../../network/home";
import storage from '../../common/storage'
import BackTop from '../../components/common/backTop/BackTop.vue';
import mixinBackTop from '../../mixins/common'
import SearchOther from '../../components/common/search/SearchOther.vue';
  export default {
    name: 'StopServer',
    mixins: [mixinBackTop],
    components: { 
      NavBar,
      Scroll,
      BackTop,
      SearchOther,
    },
    data() {
      return {
        show: false,
        list: [],
        gameType: '',
        typeid: 3,
        isLoading: false,
        loading: true,
        finished: false,
        page: 1,
        typeList: {},
        tgid: '',
        scrollTop: '',
      }
    },
    beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.querySelector('.content_box').scrollTop
    console.log(this.scrollTop)
    next()
  },
  activated() {
    const top = document.querySelector('.content_box')
    top.scrollTo(0, this.scrollTop);
    this.typeList = storage.get(this.tgid)
  },
    created () {
      this.getActivite()
      this.tgid = this.$cookies.get('tgid')
      this.typeList = storage.get(this.tgid)
    },
    methods: {
      getActivite() {
        getNewsList(this.gameType, this.typeid,this.page).then((res) => {
          this.isLoading = false;
          if (res.state === "ok") {
            console.log(res.data)
            this.list = [...this.list, ...res.data]
            this.loading = false;
            if (res.data.list === null) {
              this.finished = true;
            }
          } else if (res.msg === "no_login") {
            this.$router.replace("/login");
          }
        });
      },
      itemClick(index) {
        this.$router.push({
          path: '/notice_detail',
          query: {
            url: this.list[index].url
          }
        })
      },
      serachClick() {
        this.show = true
      },
      closeSearch() {
        this.show = false
      },
      onSearch(val) {
        //发起网络请求
        console.log(val);
      },
      onLoad() {
        this.page++;
        this.getActivite()
      },
      typeClose() {
        this.typeList.stopserver = true
        this.$toast('已经添加到首页导航区')
        storage.set(this.tgid,this.typeList)
      }
    },
  }
</script>

<style scoped>
.left,
.right {
  width: 44px;
  height: 44px;
}

.content_box {
  width: 680px;
  padding: 0 35px 100px;
   margin-top: 88px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.list_item {
  width: 680px;
  height: 80px;
  padding: 30px 0;
}

.list_title {
  width: 680px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 28px;
  color: #444;
  line-height: 40px;
}

.list_date {
  position: relative;
  line-height: 40px;
  font-size: 24px;
  color: #999;
  text-align: right;
}

.list_date::before {
  content:'';
  position: absolute;
  top: 8px;
  right: 150px;
  background: url('../../assets/img/page/ic_cash_time.png') no-repeat;
  background-size: 100%;
  width: 24px;
  height: 24px;
}

.bottom_btn {
  width: 750px;
  height: 88px;
  background: #fff;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom_btn::before {
  content: '';
  width: 44px;
  height: 44px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url('../../assets/img/page/ic_bottom_add.png') no-repeat;
  background-size: 100%;
}
</style>